<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>app politicos</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/applook.css" rel="stylesheet" type="text/css" media="all">
        <link href="css/imagescroll.css" rel="stylesheet" type="text/css" media="all">
        <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            document.addEventListener("deviceready", onDeviceReady, false);
            
            function onDeviceReady() {
                try{
                    if(isOffline()){
                        showConfirm();
                    }else {
                        loadPhotoPage();
                        loadYouTubeVideoList();
                        loadEvents();
                        setUpSocialLinks();
                    }
                }catch (e) {
                    alert(e);
                }
            }

            function isOffline(){
                try{
                    return navigator.connection.type == Connection.NONE;
                    
                }catch (e) {
                    return false;
                }
                return false;    
            }

            // Show a custom confirmation dialog
            function showConfirm() {

                navigator.notification.confirm(
                'No se detecto contectividad. Algunos recursos no podran ser visualizados',  // message
                    onConfirm,              // callback to invoke with index of button pressed
                    'Advertencia',            // title
                    'Aceptar'          // buttonLabels
                    );
            }

            // process the confirmation dialog result
            function onConfirm(buttonIndex) {
              navigator.splashscreen.hide();
            }

            
            
            
        </script>
        <script type="text/javascript" src="js/iscroll.js"></script>
        <script type="text/javascript" src="js/maqueta.js"></script>
        <script type="text/javascript" src="js/profile.js"></script>
        <script type="text/javascript" src="js/flickr.js" ></script>
        <script type="text/javascript" src="js/youtube.js"></script>
        <script type="text/javascript" src="js/mapinfo.js"></script>
        <script type="text/javascript" src="js/events.js"></script>
        <script type="text/javascript" src="js/news.js"></script>
        <script type="text/javascript" src="js/contactus.js"></script>
        <script type="text/javascript" src="js/social.js"></script>
    </head>

    <body><!-- class="splash" -->
        <div id="home" class="page"><a href="#"><img src="img/splash-home.jpg" width="640" height="1136" alt="Home"></a></div>
        <div id="noticias" class="page">
            <div class="inner">
                <header>
                    <h1>Noticias y eventos</h1>
                    <nav><a href="#"><span>&nbsp;</span></a></nav>
                </header>
                <ul class="racimo">
                    <!-- Carga dinámica de noticias !-->
                </ul>
            </div>
        </div>
        <div id="evento_detalle" class="page">
            <div class="inner">
                <header>
                    <h1>Noticias y eventos</h1>
                    <nav><a href="#" id="eventGoBack"><span>Volver</span></a></nav>
                </header>
                <a href="#" class="icon" id="shareEvent"><span>Compartir</span></a>
                <div class="detalle"></div>
            </div>
        </div>

        <div id="galeria" class="page">
            <div class="inner">
                <header>
                    <h1>Galería</h1>
                    <nav><a href="#"><span>&nbsp;</span></a></nav>
                </header>
                <ul class="racimo">
                    <li id="fotos">
                        <h3>Fotos</h3>
                        <ul>
                            <!-- Fotos cargadas dinamicamente !-->
                        </ul>
                        <a href="#" onclick="goPrevFlickrGalleryPage();" class="retro"><span>‹</span></a>
                        <a href="#" onclick="goNextFlickrGalleryPage();" class="avanz"><span>›</span></a>
                    </li>
                    <li id="videos">
                        <h3>Videos</h3>
                        <ul>
                            <!-- Videos cargados dinamicamente !-->
                        </ul>
                        <a href="#" onclick="goPrevYoutubeGalleryPage();" class="retro"><span>‹</span></a>
                        <a href="#" onclick="goNextYoutubeGalleryPage();" class="avanz"><span>›</span></a>
                    </li>
                    <li id="descargables">
                        <h3>Descargables</h3>
                        <ul>
                            <li><a href="#"><img src="img/noti-icon.jpg" width="120" height="120" alt="Fuente: el tiempo"></a></li>
                            <li><a href="#"><img src="img/noti-icon.jpg" width="120" height="120" alt="Fuente: el tiempo"></a></li>
                            <li><a href="#"><img src="img/noti-icon.jpg" width="120" height="120" alt="Fuente: el tiempo"></a></li>
                        </ul>
                        <a href="#" class="retro"><span>‹</span></a>
                        <a href="#" class="avanz"><span>›</span></a>
                    </li>
                </ul>
            </div>
        </div>


        <div id="programa" class="page active">
            <div class="inner">
                <header>
                    <h1>Programa</h1>
                    <nav><a href="#"><span>&nbsp;</span></a></nav>
                </header>
                <img src="img/programa.jpg" width="356" height="486" alt="Programa">
                <h2>Me comprometo a...</h2>
                <p>You think water moves fast? You should see ice. <a href="http://slipsum.com">It moves like it has a mind</a>. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
                <p><a href="http://slipsum.com">Do you see any Teletubbies in here?</a> Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
            </div>
        </div>
        <div id="contacto" class="page">
            <div class="inner">
                <header>
                    <h1>Contacto</h1>
                    <nav><a href="#"><span>&nbsp;</span></a></nav>
                </header>
                <img src="img/programa.jpg" width="356" height="486" alt="Contacto">
                <form action="#" method="get" name="form_contacto">
                    <label for="nombre_usuario">Nombre<input id="nombre_usuario" name="nombre_usuario" type="text"><!-- value="Ingrese su nombre" size="8" maxlength="50" --></label>
                    <label for="email_usuario">E-mail<input id="email_usuario" name="email-usuario" type="email"><!-- value="Ingrese su dirección de correo electrónico" size="8" maxlength="50" --></label>
                    <label for="web_usuario">Web<input id="web_usuario" name="web_usuario" type="text"><!-- value="Ingrese su dirección de correo electrónico" size="8" maxlength="50" --></label>
                    <label for="tel_usuario">Teléfono<input id="tel_usuario" name="tel-usuario" type="tel"><!-- value="Ingrese número de teléfono" size="8" maxlength="50" --></label>
                    <label for="dir_usuario">Dirección<input id="dir_usuario" name="dir_usuario" type="text" ><!--value="Ingrese su dirección" size="8" maxlength="50" --></label>
                    <textarea id="comentarios" name="comentarios" cols="" rows=""></textarea>
                    <input name="enviar" type="button" value="envíar"
                           onclick="sendContactUsMail();">
                </form>
            </div>
        </div>
        <div id="redes" class="page">
            <div class="inner">
                <header>
                    <h1>Redes</h1>
                    <nav><a href="#"><span>&nbsp;</span></a></nav>
                </header>
                <img src="img/programa.jpg" width="356" height="486" alt="Redes">
                <h2>Sigue la campaña</h2>
                <ul>
                    <li class="twit"><a href="#">Twitter</a></li>
                    <li class="face"><a href="#">Like</a></li>
                    <li class="tube"><a href="#">YouTube</a></li>
                </ul>
            </div>
        </div>
        <nav id="mainMenu" class="menu">
            
            <ul>
                <li class="noti" id="noticias" data-sec="noticias"><a href="#"><span>Noticias</span></a></li>
                <li class="gal" id="galeria" data-sec="galeria"><a href="#"><span>Galería</span></a></li>
                <li class="prog active" if="programa" data-sec="programa"><a href="#"><span>Programa</span></a></li>
                <li class="contac" id="contacto" data-sec="contacto"><a href="#"><span>Contacto</span></a></li>
                <li class="red" id="redes" data-sec="redes"><a href="#"><span>Redes</span></a></li>
            </ul>
        </nav>
        <!-- Scroller de imagenes !-->
        <div id="image_scroller_wrapper">
            <div id="image_scroller">
                <ul id="image_list">

                </ul>
            </div>
            <div id="image_options"><a onclick="closePhotoVisor();"><img src="img/close.png"/>  </a></div>
        </div>

        <!--<div id="mobilePhone"><img src="img/PhoneMainBar.gif" width="640" height="50" alt="esto toca quitarlo"></div> -->
        <script>
                            $(document).on('ready', function() {
                                /* DESCOMENTAR PARA PROBAR EN WEB
                                loadPhotoPage();
                                loadYouTubeVideoList();
                                loadEvents();
                                setUpSocialLinks();
                                */
                                patadita();
                            });
        </script>
    </body>
</html>
